<template>
  <div>
    <div class="title">
      <span class="title-name">系统基本情况</span>
      <span class="update-date" v-text="'更新时间：' + updateDate"/>
      <el-button type="success" @click="refresh">刷新</el-button>
    </div>
    <div style="padding: 20px;">
      <el-row :gutter="20" justify="center" type="flex" style="margin-left: -10px; margin-right: -10px;">
        <el-col :span="8" style="padding-left: 10px; padding-right: 10px;">
          <div class="index-box" style="background-color: rgb(169, 146, 226);">
            <div class="index-title"> 专家人数
              <div class="index-amount"> {{ expertTotalCount }}<span class="index-units">人</span>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="8" style="padding-left: 10px; padding-right: 10px;">
          <div class="index-box" style="background-color: rgb(84, 186, 224);">
            <div class="index-title"> 设计团队个数
              <div class="index-amount"> {{ teamTotalCount }}<span class="index-units">个</span>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="8" style="padding-left: 10px; padding-right: 10px;">
          <div class="index-box" style="background-color: rgb(236, 111, 91);">
            <div class="index-title"> 用户个数
              <div class="index-amount"> {{ userTotalCount }}<span class="index-units">人</span>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <div id="MonthChart" style="width: 1600px; height: 800px"/>
  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  name: "SystemBasicData",
  data() {
    return {
      expertTotalCount: 0,
      teamTotalCount: 0,
      userTotalCount: 0,
      updateDate: "",
      MonthChart: {}
    };
  },
  methods: {
    getExpertTotalCount() {
      this.$http.get("api/expert/count").then(res => {
        if (200 === res.data.code) {
          this.expertTotalCount = res.data.data
        }
      });
    },
    getTeamTotalCount() {
      this.$http.get("api/team/count").then(res => {
        if (200 === res.data.code) {
          this.teamTotalCount = res.data.data
        }
      });
    },
    getUserTotalCount() {
      this.$http.get("api/user/count").then(res => {
        if (200 === res.data.code) {
          this.userTotalCount = res.data.data
        }
      });
    },
    initMonthChart() {
      this.MonthChart = echarts.init(document.getElementById('MonthChart'));
      this.MonthChart.clear()

      const option = {
        tooltip: {trigger: "axis", axisPointer: {type: "shadow"}},
        title: {left: "20", text: "一年内的基本数据统计"},
        legend: {data: ["专家录入", "设计团队录入", "用户登录次数"]},
        xAxis: {type: "category", boundaryGap: !1},
        yAxis: {type: "value", boundaryGap: [0, "20%"]},
      };
      this.MonthChart.setOption(option);
    },
    countExpert() {
      this.$http.get("api/statistics/countExpert?timeUnit=m&count=12")
          .then(res => {
            let data_list = [];
            for (let n = 0; n < res.data.data.length; n++) {
              data_list[n] = [res.data.data[n].name, res.data.data[n].count];
            }
            const option = this.MonthChart.getOption()
            const _option = {
              name: "专家录入",
              type: "line",
              smooth: 0.6,
              symbolSize: 10,
              lineStyle: {color: "#a992e2", width: 5},
              itemStyle: {
                normal: {
                  color: "#a992e2",
                  label: {
                    show: !0,
                    fontSize: 20,
                    fontWeight: "bold",
                    color: "#a992e2",
                    backgroundColor: "rgba(204,204,204,0.50)",
                  },
                },
              },
              data: data_list,
            };
            option.series.push(_option)
            this.MonthChart.setOption(option, false);
          });
    },
    countTeam() {
      this.$http
          .get("api/statistics/countTeam?timeUnit=m&count=12")
          .then(res => {
            let data_list = [];

            for (let n = 0; n < res.data.data.length; n++)
              data_list[n] = [res.data.data[n].name, res.data.data[n].count];
            const option = this.MonthChart.getOption()
            const _option = {
              name: "设计团队录入",
              type: "line",
              smooth: 0.6,
              symbolSize: 10,
              lineStyle: {color: "#54bae0", width: 5},
              itemStyle: {
                normal: {
                  color: "#54bae0",
                  label: {
                    show: !0,
                    fontSize: 20,
                    fontWeight: "bold",
                    color: "#54bae0",
                    backgroundColor: "rgba(204,204,204,0.50)",
                  },
                },
              },
              data: data_list,
            };
            option.series.push(_option)
            this.MonthChart.setOption(option, false);
          });
    },
    statisticsUserLogin() {
      this.$http
          .get("api/statistics/statisticsUserLogin?timeUnit=m&count=12")
          .then(res => {
            let data_list = [];

            for (let n = 0; n < res.data.data.length; n++)
              data_list[n] = [res.data.data[n].name, res.data.data[n].count];
            const option = this.MonthChart.getOption()
            const _option = {
              name: "用户登录次数",
              type: "line",
              smooth: 0.6,
              symbolSize: 10,
              lineStyle: {color: "#ec6f5b", width: 5},
              itemStyle: {
                normal: {
                  color: "#ec6f5b",
                  label: {
                    show: !0,
                    fontSize: 20,
                    fontWeight: "bold",
                    color: "#ec6f5b",
                    backgroundColor: "rgba(204,204,204,0.50)",
                  },
                },
              },
              data: data_list,
            };
            option.series.push(_option)
            this.MonthChart.setOption(option, false);
          });
    },
    formatDate() {
      let t = new Date(),
          e = t.getFullYear(),
          a = t.getMonth() + 1,
          n = t.getDate(),
          i = t.getDay(),
          o = [
            "星期日",
            "星期一",
            "星期二",
            "星期三",
            "星期四",
            "星期五",
            "星期六",
          ],
          s = t.getHours();
      s = s < 10 ? "0" + s : s;
      let r = t.getMinutes();
      r = r < 10 ? "0" + r : r;
      let c = t.getSeconds();
      (c = c < 10 ? "0" + c : c),
          (this.updateDate = ""
              .concat(e, "/")
              .concat(a, "/")
              .concat(n, " ")
              .concat(s, ":")
              .concat(r, ":")
              .concat(c, " ")
              .concat(o[i]));
    },
    refresh() {
      this.getExpertTotalCount()
      this.getTeamTotalCount()
      this.getUserTotalCount()
      this.initMonthChart()
      this.statisticsUserLogin()
      this.countExpert()
      this.countTeam()
      this.formatDate()
    },
  },
  created() {
    this.getExpertTotalCount()
    this.getTeamTotalCount()
    this.getUserTotalCount()
  },
  mounted() {
    this.initMonthChart()
    this.statisticsUserLogin()
    this.countExpert()
    this.countTeam()
    this.formatDate()
  }
}
</script>

<style scoped>
.title {
  margin-top: 10px;
}

.title .title-name {
  font-weight: 700;
  padding: 10px;
}

.title .update-date {
  padding: 10px;
}

.index-box {
  border-radius: 4px;
  min-height: 36px;
  color: #fff;
}

.index-title {
  padding: 10px 0 20px 20px;
  font-size: 36px;
}

.index-amount {
  float: right;
  font-size: 30px;
  font-weight: 700;
  padding: 10px 10px;
}

.index-units {
  font-size: 16px;
  margin-left: 5px;
  padding-right: 20px;
}
</style>